<template>
  <div class="app-container">
    <el-button type="primary" @click="add(0,'add')">添加节点</el-button>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin: 20px 0;"
      row-key="id"
      border
      :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="name"
        label="菜单名"
        width="250"
      />
      <el-table-column
        prop="path"
        label="地址"
        width="250"
      />
      <el-table-column

        prop="component"
        width="200"
        label="页面路由"
      />
      <el-table-column
        label="图标"
        width="50"
      >
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="50"
      />
      <el-table-column
        width="150"
        label="类型"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" style="margin-right:10px" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.status == 2" style="margin-right:10px" type="info">接口</el-tag>
          <el-tag v-if="scope.row.status == 3" style="margin-right:10px" type="warning">外链</el-tag>
          <el-tag v-if="scope.row.status == 2 && scope.row.method == 'POST'" type="success">POST</el-tag>
          <el-tag v-if="scope.row.status == 2 && scope.row.method == 'GET'">GET</el-tag>
          <el-tag v-if="scope.row.status == 2 && scope.row.method == 'PUT'" type="warning">PUT</el-tag>
          <el-tag v-if="scope.row.status == 2 && scope.row.method == 'DELETE'" type="danger">DELETE</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="add(scope.row,'add')">添加子节点</el-button>
          <el-button type="text" @click="add(scope.row,'edit')">编辑</el-button>
          <el-button type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="上级菜单">
            <el-select ref="selectReport" v-model="form.pid" placeholder="请选择上级节点">
              <el-option :label="Pname" :value="form.pid" style="width:300px;height:200px;overflow: auto;background-color:#fff">
                <el-tree
                  :data="treeData"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点类型">
            <el-radio-group v-model="form.status" @change="changeHandler">
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">接口</el-radio>
              <el-radio :label="3">外链</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="节点名称">
            <el-input v-model="form.name" placeholder="请输入节点名称" />
          </el-form-item>
          <el-form-item v-show="iconStatus" label="图标">
            <el-select ref="selectReport" v-model="form.icon" placeholder="请选择图标">
              <el-option :label="form.icon" :value="form.icon" style="overflow: auto;width:300px;height:200px;background-color:#fff;white-space: normal!important;">
                <span v-for="(val,index) in iconList" :key="index" style="color:#858585;">
                  <i v-if="val" style="font-size: 25px;margin:10px;" :class="'el-icon-' + val.icon" @click="selIcon('el-icon-' + val.icon)" />
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.path" placeholder="请输入地址（顶级菜单前需要加'/'例:/admin）" />
          </el-form-item>
          <el-form-item v-if="componentStatus" label="文件地址">
            <el-input v-model="form.component" placeholder="请输入页面文件地址，没有请放空" />
          </el-form-item>
          <el-form-item v-if="componentStatus" label="排序">
            <el-input v-model="form.sort" placeholder="请输入排序（倒序）" />
          </el-form-item>
          <el-form-item v-if="methodStatus" label="请求类型">
            <el-select v-model="form.method" placeholder="请选择请求类型">
              <el-option label="GET" value="GET" />
              <el-option label="POST" value="POST" />
              <el-option label="PUT" value="PUT" />
              <el-option label="DELETE" value="DELETE" />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="sub()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { getMenu, MenuAddOrEdit, MenuDel, getIcon } from '@/api/user'
export default {

  data() {
    return {
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      selected: 'A',
      loading: true,
      tableData: [],
      treeData: [],
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        pid: '1',
        path: '',
        component: '',
        status: 1,
        icon: '',
        method: '',
        sort: 0
      },
      Pname: '顶级节点',
      oldForm: {
        id: '',
        name: '',
        pid: '',
        path: '',
        component: '',
        status: 1,
        icon: '',
        method: '',
        sort: 0
      },
      iconList: [],
      iconStatus: true,
      componentStatus: true,
      methodStatus: false

    }
  },
  created() {
    this.getList()
    this.GetAllIcon()
  },
  methods: {
    GetAllIcon() {
      getIcon().then(response => {
        this.iconList = response.data
      })
    },
    getList() {
      this.tableData = []
      this.treeData = []
      getMenu().then(response => {
        const { data } = response
        this.tableData = data
        var treeData = {
          id: 0,
          name: '顶级节点',
          child: data
        }
        this.treeData.push(treeData)
        this.loading = false
      })
    },
    add(data, type) {
      if (type === 'add') {
        this.form = this.oldForm
        if (data === 0) {
          this.form.pid = 0
          this.Pname = '顶级节点'
        } else {
          this.form.pid = data.id
          this.Pname = data.name
        }
      } else {
        this.form = data
        if (this.form.pid === 0) {
          this.Pname = '顶级节点'
        } else {
          this.Pname = this.searchId(this.form.pid, this.tableData, 1)
        }
        delete this.form['child']
      }
      this.dialogVisible = true
    },
    // 递归查上级
    searchId(id, data, isFirst = 1) {
      var Pname = ''
      for (var i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          Pname = data[i].name
          break
        }
        if (data[i].child.length > 0) {
          var name = this.searchId(id, data[i].child, 2)
          if (name) {
            Pname = name
            break
          }
        }
      }
      if (isFirst === 1 && i === data.length) {
        Pname = '顶级节点'
      }
      return Pname
    },
    sub() {
      if (!this.form.name) {
        this.$message({
          message: '名称不能为空',
          type: 'error'
        })
        return
      }
      if (!this.form.path) {
        this.$message({
          message: '地址不能为空',
          type: 'error'
        })
        return
      }
      if (this.form.status === 1 && this.form.pid && !this.form.component) {
        this.$message({
          message: '非顶级菜单请输入页面路由',
          type: 'error'
        })
        return
      }
      this.dialogVisible = false
      this.loading = true
      MenuAddOrEdit(this.form).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        var that = this
        setTimeout(function() {
          that.getList()
        }, 500)
      }).catch(() => {
        this.loading = false
      })
    },
    handleNodeClick(node) {
      if (!node.children) {
        this.form.pid = node.id
        this.Pname = node.name
        this.$refs.selectReport.blur()
      }
    },
    del(id) {
      var that = this
      this.$confirm('此操作将删除该节点和所有子节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        MenuDel({ id: id }).then((res) => {
          that.$message({
            type: 'success',
            message: '删除成功!'
          })
          setTimeout(function() {
            that.getList()
          }, 500)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    selIcon(icon) {
      this.form.icon = icon
    },
    changeHandler(e) {
      if (e === 2) {
        this.iconStatus = false
        this.form.icon = ''
        this.methodStatus = true
      } else {
        this.form.method = ''
        this.methodStatus = false
        this.iconStatus = true
      }
      if (e !== 1) {
        this.componentStatus = false
      } else {
        this.componentStatus = true
      }
    }

  }
}
</script>
<style>
.filter-tree{
  width: 100%;
}
.fr{
  float: right;
  vertical-align: middle;
}
.custom-tree-node{
  width: 100%;
  /* padding: 30px 0; */
}
.lefts{
  vertical-align: middle;
}

</style>
